<template>
  <div class="approval">
    <div class="approval-inner">
      <div class="title">
        审批
        <i class="ic_close" @click="close"></i>
      </div>
      <div style="height: 400px;">
        <vuescroll :ops="ops">
        <div class="info">
          <div class="info-left">延期理由:</div>
          <div class="info-right">{{taskInfo.delayInfo.reason}}</div>
        </div>
        <div class="info ">
          <div class="info-left">附件:</div>
          <div class="info-right">
            <vuescroll :ops="ops">
              <!--          图片-->
              <ul class="list">
                <li v-for="(item,index) in images" :key="index" v-if="images.length>0" @click="opemImg(item.filePath)">
                  <div class="img" :style="{backgroundImage: 'url(\''+ (encodeURI(item.filePath)) +'\')' }"></div>
                </li>
              </ul>
              <!--          文件-->
              <ul class="list">
                <li v-for="(item,index) in files" :key="index" v-if="files.length>0" @click="fileDownload(item.filePath)">
                  <i :class="item.fileNameSuffix+'-icon'"></i>
                  {{item.fileName}}
                </li>
              </ul>
              <!--          视频-->
              <ul class="list">
                <li v-for="(item,index) in videos" :key="index" @click="openVideo(item)">
                  <i class="video-icon"></i>
                  {{item.fileName}}
                </li>
              </ul>
            </vuescroll>
          </div>
        </div>
        <div class="delay-time">
          <span v-if="taskInfo.taskType2==2">{{new Date(old_delay_time).Format('yyyy-MM-dd hh:mm')}} ——</span>
          <span v-else>{{new Date(old_delay_time).Format('yyyy-MM-dd')}} ——</span>
          <el-date-picker v-if="taskInfo.taskType2==2"
            v-model="delay_time" :picker-options="pickerOptionsStart" :default-time="defaultTime" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="设定延期时间">
          </el-date-picker>
          <el-date-picker v-else
                          v-model="delay_time" :picker-options="pickerOptionsStart" :default-time="defaultTime" value-format="yyyy-MM-dd HH:mm:ss"
                          type="date"
                          placeholder="设定延期时间">
          </el-date-picker>
        </div>
        <div class="status">
          <el-radio v-model="status" label="2">同意</el-radio>
          <el-radio v-model="status" label="3">不同意</el-radio>
        </div>
        <div class="textarea">
          <el-input
            resize="none"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>
        </vuescroll>
      </div>
      <div class="btn">
        <span @click="submit">提交</span>
      </div>
    </div>
    <div v-if="is_show_video">
      <videoBox :data="videoData" @close="closeVideo"></videoBox>
    </div>
    <el-dialog append-to-body :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import videoBox from '@/components/video/index'
  export default {
    name: "Approval",
    props: {
      data: {
        type: Object
      }
    },
    components: {
      vuescroll,videoBox
    },
    data() {
      return {
        videoData:{},
        is_show_video:false,
        files:[],
        images:[],
        videos:[],
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0.1,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '80px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '5px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        pickerOptionsStart: {},
        defaultTime: [],
        taskInfo: this.data,
        old_delay_time: '',//之前的延期时间
        delay_time: '',//现在修改的延期时间
        status: '2',//2:同意 3：不同意
        textarea: '',//
        dialogVisible:false,
        dialogImageUrl:'',
      }
    },
    created() {
      let _this = this;
      console.log(this.taskInfo);
      this.query_files(this.taskInfo.taskId);
      this.old_delay_time = this.taskInfo.delayInfo.oldLimitTime;
      this.delay_time = this.taskInfo.delayInfo.delayLimitTime;
      let start = this.old_delay_time.split(" ");
      this.defaultTime = start[1];
      this.pickerOptionsStart = {
        disabledDate(date) {
          let startdate = new Date(start[0]) - 86400000;
          return date && date.valueOf() < startdate;
        },
      }
    },
    methods: {
      opemImg(url){
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      },
      //请求待审批的数量
      getUnCompleteDelayNum() {
        this.$http.get('task/task/query/unCompleteDelayNum', {
          params: {
            userId: this.$store.state.userInfo.userId,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.$store.commit('SET_USERINFO_UNCCOMPLETEDELAYNUM', res.data);
          } else {
            // this.$message.error(res.statu)
          }
        })
      },
      openVideo(data){
        this.videoData=data;
        this.is_show_video=true;
      },
      closeVideo(){
        this.is_show_video=false;
      },
      //附件下载
      fileDownload(url) {
        if (!url) {
          return;
        }
        window.open(url);
        return;
        console.log(url);
        var myFrame = document.createElement('iframe');
        // 'https://www.smartptm.com/file/1574387841676_qn17l3lhpu.txt'
        myFrame.src=url;
        myFrame.style.display = 'none';
        document.body.appendChild(myFrame);
      },
      //查询任务附件
      query_files(id){
        this.$http.get('task/task/query/delayFile',{
          params:{
            taskId:id
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.files=res.data.files||[];
            this.images=res.data.images||[];
            this.videos=res.data.videos||[];
          }
        })
      },
      //提交
      submit() {
        let _this = this;
        let formdata = new FormData();
        console.log(_this.delay_time);
        formdata.append('status', _this.status);//审核状态 2：通过 3：不通过
        formdata.append('delayTime', _this.delay_time);//延期时间
        formdata.append('taskId', _this.taskInfo.taskId);//任务id
        formdata.append('userId', _this.$store.state.userInfo.userId);//用户id
        formdata.append('content', _this.textarea);//内容
        formdata.append('reportType', 5);//汇报类型 5：完结汇报 2：申请延期

        this.$http.post('/task/report/completeReport', formdata).then(res => {
          if (res.statusCode == 200) {
            _this.$message.success('提交成功');
            _this.close();
            _this.getUnCompleteDelayNum();
            _this.$emit('update');
          } else {
            _this.$message.error(res.statusMsg);
          }
        });
      },
      //关闭
      close() {
        this.$emit("close");
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .approval {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;

    .approval-inner {
      position: absolute;
      width: 626px;
      height: fit-content;
      border-radius: 6px;
      top: 0;
      margin: auto;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: #ffffff;
      padding: 0 32px;

      .title {
        line-height: 78px;
        height: 78px;
        color: #454A55;
        font-size: 16px;
        position: relative;
        font-weight: bold;

        i {
          position: absolute;
          width: 16px;
          height: 17px;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url("../../assets/img/close_icon.png");
          right: 0;
          top: 31px;
          cursor: pointer;
        }
      }

      .info {
        overflow: hidden;
        width: 100%;
        font-size: 14px;
        padding-bottom: 15px;

        .info-left {
          float: left;
          width: 70px;
          color: #454A55;
          line-height: 20px;
        }

        .info-right {
          float: left;
          width: calc(100% - 70px);
          color: #96A2AA;
          line-height: 20px;
          .list {
            overflow: hidden;

            li {
              width: 100px;
              height: 100px;
              border: 1px solid #EEEEEE;
              text-align: center;
              font-size: 12px;
              padding-top: 50px;
              box-sizing: border-box;
              color: #96A2AA;
              position: relative;
              margin: 0 16px 16px 0;
              /*border-radius: 6px;*/
              white-space: nowrap;
              cursor: pointer;
              float: left;
              > .img {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100px;
                height: 100px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                /*border-radius: 6px;*/
              }

              i {
                position: absolute;
                width: 20px;
                height: 20px;
                top: 30px;
                left: 40px;
                background-image: url("../../assets/img/annex/ic_ty.png");
              }

              i.add {
                background-image: url("../../assets/img/annex/ic_add.png");
              }

              i.word-icon {
                background-image: url("../../assets/img/annex/ic_word.png");
              }

              i.pdf-icon {
                background-image: url("../../assets/img/annex/ic_pdf.png");
              }

              i.txt-icon {
                background-image: url("../../assets/img/annex/ic_txt.png");
              }

              i.xlsx-icon {
                background-image: url("../../assets/img/annex/ic_excel.png");
              }

              i.ppt-icon {
                background-image: url("../../assets/img/annex/ic_ppt.png");
              }

              i.video-icon {
                background-image: url("../../assets/img/annex/ic_video.png");
              }

              i.icon-del {
                background-image: url("../../assets/img/annex/ic_delete.png");
                width: 16px;
                height: 16px;
                position: absolute;
                left: 90px;
                top: -5px;
              }
            }
          }
        }
      }
      .delay-time {
        padding-bottom: 16px;
        font-size: 14px;
        color: #96A2AA;
      }

      .status {
        padding-bottom: 32px;
      }

      .textarea {
        padding-bottom: 24px;
      }

      .btn {
        text-align: right;
        padding-bottom: 24px;

        > span {
          display: inline-block;
          background-color: #0755DB;
          text-align: center;
          border-radius: 6px;
          width: 88px;
          height: 32px;
          line-height: 32px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .delay-time {
    .el-input__inner {
      border: none !important;
    }
  }

  .textarea {
    .el-textarea__inner {
      padding: 24px 25px;
      background-color: #F2F6F9;
      border-radius: 6px;
      border: none;
      height: 160px;
    }
  }
</style>
